<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ollama App</title>
    <link rel="stylesheet" href="src/styles.css">
    </head>
<body>
    <div class="app-container">
        <!-- 移动端顶部栏 -->
        <div class="mobile-header">
            <button id="menuButton" class="menu-button" aria-label="菜单">
                <div class="menu-icon"></div>
            </button>
            <div class="current-chat-title">当前会话名称</div>
        </div>

        <!-- 侧边栏 -->
        <div class="sidebar">
            <button id="newChatButton" class="new-chat-button">
                <span>新建会话</span>
            </button>
            
            <!-- 清空所有会话按钮 -->
            <button id="clearAllButton" class="clear-all-button">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M3 6h18"></path>
                    <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                    <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
                </svg>
                <span>清空所有会话</span>
            </button>
            
            <div class="chat-list" id="chatList">
                <!-- 会话列表将在这里动态添加 -->
            </div>
            
            <div class="sidebar-footer">
                <button id="settingsButton" class="settings-button">
                    <span>⚙️ 设置</span>
                </button>
            </div>
        </div>

        <!-- 主聊天区域 -->
        <div class="chat-container">
            <div class="chat-messages" id="messageContainer">
                <!-- 消息将在这里动态添加 -->
            </div>
            <div class="input-container">
                <button id="uploadButton" class="upload-button" aria-label="上传文件">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                        <polyline points="17 8 12 3 7 8"/>
                        <line x1="12" y1="3" x2="12" y2="15"/>
                    </svg>
                </button>
                <textarea 
                    id="userInput" 
                    placeholder="输入消息..." 
                    rows="1"
                ></textarea>
                <button id="sendButton" aria-label="发送消息">发送</button>
                <input type="file" id="fileInput" style="display: none" accept=".txt,.md,.js,.ts,.html,.css,.json,.yaml,.xml">
            </div>
        </div>
    </div>

    <!-- 添加设置弹窗 -->
    <div id="settingsModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>设置</h2>
                <button class="close-button">✕</button>
            </div>
            <div class="modal-body">
                <div class="settings-group">
                    <label>URL</label>
                    <input type="text" id="baseUrlInput" value="http://localhost:11434" placeholder="输入基础URL">
                    <div class="description">设置Ollama的请求URL</div>
                </div>
                <div class="settings-group">
                    <label>模型选择</label>
                    <select id="modelSelect">
                        <option value="">加载中...</option>
                    </select>
                    <div class="description">选择要使用的 AI 模型，不同模型有不同的特点和性能表现。</div>
                </div>
                <div class="settings-group">
                    <label>温度 (Temperature)</label>
                    <div class="description">控制输出的随机性，较高的值会产生更有创意但可能不太准确的回答。</div>
                    <div class="slider-container">
                        <input type="range" id="temperatureSlider" min="0" max="100" value="70">
                        <span id="temperatureValue">0.7</span>
                    </div>
                </div>
                <div class="settings-group">
                    <label>Top P</label>
                    <div class="description">控制词汇采样的概率阈值，较低的值会使输出更加集中和确定。</div>
                    <div class="slider-container">
                        <input type="range" id="topPSlider" min="0" max="100" value="90">
                        <span id="topPValue">0.9</span>
                    </div>
                </div>
                <div class="settings-group">
                    <label>Top K</label>
                    <div class="description">限制每次选择的候选词数量，较小的值会使输出更加保守和可预测。</div>
                    <div class="slider-container">
                        <input type="range" id="topKSlider" min="0" max="100" value="40">
                        <span id="topKValue">40</span>
                    </div>
                </div>
                <div class="settings-group">
                    <label>重复惩罚 (Repeat Penalty)</label>
                    <div class="description">控制模型重复内容的惩罚程度，较高的值会减少重复但可能影响连贯性。</div>
                    <div class="slider-container">
                        <input type="range" id="repeatPenaltySlider" min="100" max="200" value="110">
                        <span id="repeatPenaltyValue">1.1</span>
                    </div>
                </div>
                <div class="settings-group">
                    <label>最大长度 (Max Length)</label>
                    <div class="description">限制模型回答的最大字符数，较大的值允许更长的回答但可能消耗更多资源。</div>
                    <div class="slider-container">
                        <input type="range" id="maxLengthSlider" min="100" max="4000" value="2000" step="100">
                        <span id="maxLengthValue">2000</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 在 body 标签内添加拖拽覆盖层 -->
    <div class="drag-overlay">
        <div class="drag-message">
            拖放文件到这里上传
        </div>
    </div>

    <script type="module" src="src/main.ts"></script>
</body>
</html>
